<template>
  <div class="edit-form-box">
    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
      <a-form-item name="itemName" label="所属类别">
        <a-input v-model:value="menuItemData.itemName" disabled />
      </a-form-item>
      <a-form-item name="packageName" label="商品名称" :rules="[{ required: true, message: '请选择商品名称!' }]">
        <a-select v-model:value="formState.packageName" :disabled="actionType === 'UPDATE'">
          <template v-for="item in productData" :key="item.id">
            <a-select-option :value="item.productName">{{
              item.productName
            }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item name="price" label="单价">
        <a-input v-model:value="formState.price" suffix="元" />
      </a-form-item>
      <a-form-item name="totalPrice" label="总价">
        <a-input v-model:value="formState.totalPrice" suffix="元" />
      </a-form-item>
      <a-form-item name="packageType" label="票类型">
        <a-select v-model:value="formState.packageType">
          <a-select-option :value="1">专项票</a-select-option>
          <a-select-option :value="2">套票</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="validDay" label="有效期">
        <a-input v-model:value="formState.validDay" suffix="天" />
      </a-form-item>
      <a-form-item name="orderNum" label="排序">
        <a-input v-model:value="formState.orderNum" />
      </a-form-item>
      <a-form-item name="state" label="状态">
        <a-switch :checked="formState.state === 1" checked-children="开启" un-checked-children="关闭"
          @click="(checked) => (checked ? (formState.state = 1) : (formState.state = 0))" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { selectMenuItemById } from "@/api/ticket/menuItem";
import { selectProductByExample } from "@/api/system/product";

const props = defineProps({
  actionType: {
    type: String,
    default: 'ADD'
  },
  menuId: {
    type: Number,
    default: 0,
  },
  menuItemId: {
    type: Number,
    default: 0,
  },
  formData: {
    type: Object,
    default(rawProps) {
      return rawProps;
    },
  },
});

const formState = reactive(props.formData);
const menuItemData = reactive<API.TicketMenuItem>({});
const productData = ref<API.ProductItem[]>([]);

/**
 * 获取类别详情
 * @param id
 */
const loadMenuItemData = async (id: number) => {
  const result = await selectMenuItemById({ id });
  Object.assign(menuItemData, result);
};

/**
 * 获取商品列表
 */
const loadProductData = async () => {
  const { seachList } = await selectProductByExample(
    { ticketType: props.menuId },
    { pageNum: 1, pageSize: 999 }
  );
  productData.value = seachList;
};

onMounted(() => {
  loadMenuItemData(props.menuItemId);
  loadProductData();
});

defineExpose({
  formState: Object.assign(formState, {
    menuItemId: props.menuItemId,
    ticketType: props.menuId,
  }),
});
</script>
<style lang="less" scoped>
.edit-type {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}

.edit-form-box {
  width: 700px;

  .btn-submit {
    width: 50%;
  }
}
</style>
